<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>WMD Example</title>
        
		<!-- 编辑器样式 -->
        <link rel="stylesheet" type="text/css" href="wmd.css"/>
	
    </head>
    <body>
        <h1>WMD Example</h1>

        <div class="wmd">
            <div id="wmd-button-bar"></div>
            <textarea id="wmd-input" rows="8"></textarea>
            <div id="wmd-preview" class="wmd-preview"></div>
        </div>

		
		<!-- 编辑器需要加载的JS文件 -->
		<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="wmd.js"></script>
        <script type="text/javascript" src="showdown.js"></script>
        <script type="text/javascript" src="prettify.js"></script>
        <script type="text/javascript">
			(function($) {
				var f = $;
				var i,
				g;
				var c = 0;
				var h = 32;
				var b;
				f.fn.TextAreaResizer = function() {
					return this.each(function() {
						i = f(this);
						g = null;
						var drag = f('<div class="grippie"></div>').bind("mousedown", {
							el: this
						},
						j);
						drag.insertAfter(f(this));
						//f(this).parent().append();
						var k = f("div.grippie", f(this).parent())[0];
						k.style.marginRight = (k.offsetWidth - f(this)[0].offsetWidth) + "px"
					})
				};
				function j(k) {
					i = f(k.data.el);
					i.blur();
					c = d(k).y;
					g = i.height() - c;
					i.css("opacity", 0.25);
					f(document).mousemove(e).mouseup(a);
					return false
				}
				function e(m) {
					var k = d(m).y;
					var l = g + k;
					if (c >= (k)) {
						l -= 5
					}
					c = k;
					l = Math.max(h, l);
					i.height(l + "px");
					if (l < h) {
						a(m)
					}
					return false
				}
				function a(k) {
					f(document).unbind("mousemove", e).unbind("mouseup", a);
					i.css("opacity", 1);
					i.focus();
					i = null;
					g = null;
					c = 0
				}
				function d(k) {
					return {
						x: k.clientX + document.documentElement.scrollLeft,
						y: k.clientY + document.documentElement.scrollTop
					}
				}
						
				function styleCode() 
				{
					if (typeof disableStyleCode != "undefined") 
					{
						return;
					}

					var a = false;

					$("pre code").each(function() 
					{
						if (!$(this).hasClass("prettyprint")) 
						{
							$(this).addClass("prettyprint");
							a = true
						}
					});
					
					if (a) { prettyPrint() } 
				}

				
				//highlight
				styleCode();
				
				setup_wmd({
					input: "wmd-input",
					button_bar: "wmd-button-bar",
					preview: "wmd-preview"
					//output: "wmd-copy_html"
				});
				
				$('#wmd-input').TextAreaResizer();
				
				
				$.fn.insertAtCaret = function (myValue) {
						return this.each(function(){
								//IE support
								if (document.selection) {
										this.focus();
										sel = document.selection.createRange();
										sel.text = myValue;
										this.focus();
								}
								//MOZILLA/NETSCAPE support
								else if (this.selectionStart || this.selectionStart == '0') {
										var startPos = this.selectionStart;
										var endPos = this.selectionEnd;
										var scrollTop = this.scrollTop;
										this.value = this.value.substring(0, startPos)
													  + myValue
											  + this.value.substring(endPos, this.value.length);
										this.focus();
										this.selectionStart = startPos + myValue.length;
										this.selectionEnd = startPos + myValue.length;
										this.scrollTop = scrollTop;
								} else {
										this.value += myValue;
										this.focus();
								}
						});

				};

			})(jQuery); 
        </script>
    </body>
</html>
